<script>
	import { t } from 'svelte-i18n';
	import { afterUpdate } from 'svelte';
	import OverlayScrollbars from 'overlayscrollbars';
	import {
		activeBanner,
		bannerList,
		assets,
		activeVersion,
		isCustomBanner,
		customData
	} from '$lib/store/app-stores';
	import { playSfx } from '$lib/helpers/audio/audio';
	import { getBannerName } from '$lib/helpers/nameText';
	import {
		get3StarItem,
		get4StarItem,
		get5StarItem,
		getCharDetails,
		getDetails,
		getWpDetails,
		regionElement
	} from '$lib/helpers/gacha/itemdrop-base';

	import List from './_list.svelte';
	import Description from './_description.svelte';
	import PromotionalV1 from './_promotional-v1.svelte';
	import PromotionalV2 from './_promotional-v2.svelte';
	import Title from '../_title.svelte';

	export let tplVersion = 'v2';

	let {
		bannerName,
		stdver,
		region,
		type: banner,
		character = '',
		characters: ch = {},
		weapons: wp = {},
		featured = [],
		rateup = []
	} = $bannerList[$activeBanner];
	const isChronicled = banner === 'chronicled';
	const isWp = banner.match('weapon');
	const { vision } = $isCustomBanner ? $customData : getCharDetails(character);

	// Get Droplist
	const { patch: version, phase } = $activeVersion;
	const drop3star = get3StarItem();

	// Drop4star
	const list4star = get4StarItem({
		phase,
		version,
		region,
		banner,
		type: 'all',
		rateupNamelist: !isChronicled ? rateup : [...ch['4star'], ...wp['4star']]
	});
	rateup = rateup
		.filter((name) => name)
		.map((name) => getDetails(name))
		.map((val) => ({ ...val, rateup: true }));
	const drop4star = [...rateup, ...list4star];

	// drop 5star
	const rateup5Star = isWp ? featured.map(({ name }) => name) : [character];
	const list5star = get5StarItem({
		phase,
		version,
		stdver,
		banner,
		region,
		type: banner.match(/standard|chronicled/) ? 'all' : banner.split('-')[0],
		rateupItem: !isChronicled ? rateup5Star : [...ch['5star'], ...wp['5star']]
	});

	character = { ...($isCustomBanner ? $customData : getCharDetails(character)), rateup: true };
	const weapons = featured
		.map(({ name }) => getWpDetails(name))
		.map((val) => ({ ...val, rateup: true, type: 'weapon' }));

	const rateup5 = banner.match('character') ? [character] : weapons;
	const drop5star = [...(rateup5 || []), ...list5star];

	// BannerName
	const bannerSlug = getBannerName(bannerName).name;
	const isStd = banner === 'standard';
	const defaultName = $t(`banner.${isStd ? 'wanderlust' : bannerSlug || 'beginner'}`);
	bannerName = $isCustomBanner ? $customData.bannerName : defaultName;

	const noPromo = banner.match(/(standard|beginner)/);
	let activeContent = noPromo ? 2 : 1;

	// Click Handler
	const select = (selected) => {
		if (activeContent === selected) return;
		activeContent = selected;
		playSfx();
	};

	let scrollable;
	afterUpdate(() => {
		OverlayScrollbars(scrollable, { sizeAutoCapable: false, className: 'os-theme-light' });
	});
</script>

<svelte:head>
	<title>
		{bannerName.replaceAll(/(#)/gi, '')} | {$t('title')}
	</title>
</svelte:head>

<Title type={banner} vision={regionElement(region) || vision} {bannerName} {tplVersion} />

{#if tplVersion === 'v2'}
	<nav style="background-image: url({$assets['book-select-bg.webp']});">
		{#if !noPromo}
			<div class="nav-item" class:active={activeContent === 1}>
				<button on:click={() => select(1)}>
					{#if banner.match('chronicled')}
						{$t('details.designatable')}
					{:else}
						{$t('details.promotional')}
					{/if}
				</button>
			</div>
		{/if}
		<div class="nav-item" class:active={activeContent === 2}>
			<button on:click={() => select(2)}> {$t('details.text')} </button>
		</div>
		<div class="nav-item" class:active={activeContent === 3}>
			<button on:click={() => select(3)}> {$t('details.itemlist')} </button>
		</div>
	</nav>

	<div class="content" bind:this={scrollable}>
		<div class="wrapper">
			{#if activeContent === 1}
				<PromotionalV2
					chronicledList={isChronicled ? drop5star : []}
					data={{ weapons, character, bannerType: banner, rateup }}
				/>
			{:else if activeContent === 2}
				<Description
					bannerType={banner}
					{bannerName}
					{weapons}
					{character}
					{rateup}
					{region}
					{drop5star}
					tplVersion="v2"
				/>
			{:else if activeContent === 3}
				<List {drop5star} {drop4star} {drop3star} bannerType={banner} tplVersion="v2" />
			{/if}
		</div>
	</div>
{:else}
	<PromotionalV1
		chronicledList={isChronicled ? drop5star : []}
		data={{ weapons, character, bannerType: banner, rateup }}
	/>
	<Description
		bannerType={banner}
		{bannerName}
		{weapons}
		{character}
		{rateup}
		{region}
		{drop5star}
	/>
	<br />
	<List {drop5star} {drop4star} {drop3star} bannerType={banner} />
{/if}

<style>
	nav {
		width: 100%;
		line-height: 0;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		background-size: cover;
		background-position: center center;
	}

	.nav-item {
		width: 33.33333%;
		padding: 0;
		display: flex;
		justify-content: center;
	}
	.nav-item button {
		font-size: calc(0.017 * var(--content-width));
		width: 100%;
		aspect-ratio: 557/86;
		opacity: 0.8;
		background-size: contain;
		background-position: center center;
		background-repeat: no-repeat;
		transition: all 0.2s;
	}

	.nav-item.active button,
	.nav-item button:hover {
		background-image: url('');
		color: #fff;
	}

	.nav-item.active button {
		opacity: 1;
	}

	.content {
		height: 100%;
	}
</style>
